<template>
	<view class="login">
			<u-icon name="arrow-left" color="white" size="24"></u-icon>
			<view class="card">
				<text class="tit">绑定手机号</text>
				<view class="input-box">
					<u-icon name="account" size="20"></u-icon>
					<u-input v-model="phone" :type="type" :border="border" placeholder="请输入手机号"  />
				</view>
				<view class="input-box">
					<u-icon name="lock" size="20"></u-icon>
					<u-input v-model="code" :type="type" :border="border" placeholder="验证码"  />
					<u-button type="success" @click="SetYzm()">{{text}}</u-button>
				</view>
				<u-button type="success" @click="SetPhone()">绑定</u-button>
			</view>
			<u-toast ref="uToast" />
		</view>
	</template>
	<script>
		import { setPhone,setYzm } from "../../http/api.js"
		export default {
			data() {
				return {
					phone:'',
					code:'',
					text:'发送验证码'
				};
			},
			onLoad() {
				
			},
			methods:{
				async SetYzm(){		
					let data = await setPhone({phone:this.phone});
					console.log(data);
					if(data.code === 20000){
						uni.showToast({
								title: `验证码：${data.data}`,
								icon: 'none',
								duration:3000
							})
						var num = 60;
						var times = setInterval(()=>{
							if(num > 0){
								num -= 1;
								this.text = `${num}s`
							}else{
								clearInterval(times);
								this.text = `发送验证码`;
							}
						},1000)
					}else{
						uni.showToast({
								title: data.data,
								icon: 'none',
								duration:3000
							})
					}
				},
				async SetPhone(){
					let res = await setYzm({phone:this.phone,code:this.code});
					console.log(res);
					if(res.code === 20000){
						uni.showToast({
							title: '绑定成功!',
							icon: 'none',
							duration:3000
						})
						let user = uni.getStorageSync('user');
						user.phone = this.phone;
						uni.setStorageSync('user',user);
						uni.navigateBack({
							delta:2
						})
					}else{
						uni.showToast({
							title: res.data,
							icon: 'none',
							duration:3000
						})	
					}
				}
			}
		}
	</script>
	
	<style lang="scss">
		.login{
			height: 100%;
			background: linear-gradient(120deg,#3bfdaf,#70d6f2);
			&>.u-icon{
				padding: 30rpx;
			}
			.card{
				background-color: #fff;
				height: 76%;
				border-radius: 5% 5% 0 0;
				// margin-top: 24%;
				position: fixed;
				width: 100%;
				bottom: 0;
				padding: 60rpx;
				box-sizing: border-box;
				.tit{
					font-size: 40rpx;
				}
				.input-box{
					margin: 30rpx 0;
					position: relative;
					.u-icon{
						position: absolute;
						top: 50%;
						left: 15rpx;
						transform: translate(0,-50%);
					}
					.u-input{
						background: #F5F5F5;
						border-radius: 10rpx;
						input{
							padding: 0 60rpx;
						}
					}
					.u-button{
						position: absolute;
						right: 0;
						width: 250rpx;
						top: 0;
						height: 100%;
					}
				}
				.forget{
					padding: 20rpx 0;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					:first-child{
						color: #5ccc84;
					}
					:last-child{
						color: #777;
					}
				}
				.wx{
					width: 100rpx;
					height: 100rpx;
					border: 2rpx solid #5ccc84;
					border-radius: 50%;
					padding: 17rpx;
					box-sizing: border-box;
					margin: 0 auto;
				}
				.check{
					margin-top: 30rpx;
					color: #777;
					checkbox{
						transform:scale(0.6);
					}
				}
				
			}
		}
</style>
